<template>
  <div>
    <div class="title">
      <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tops">
      <div class="xiangyou" @click="returns">&lt;</div>
    </div>
    <!-- 公告按钮 -->
    <div class="notice">
      <div>
        现在的公告:<span style="margin-left: 60px">{{ this.a }}</span>
        <el-button style="margin-left: 60px" @click="onnav">编辑公告</el-button>
      </div>
    </div>
    <div class="index——bott demo-ruleForm" v-if="ddda" >
      <el-input v-model="input" placeholder="请输入内容" ></el-input>

      <div class="cont">
        <div class="queding" @click="entd">确定</div>
        <div class="quxiao" @click="tnes">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNotice, uPnavicons } from '../../api/index'
export default {
  data() {
    return {
      lists: [],
      input: '',
      ddda: false,
      a:''
    }
  },
  created() {
    this.norgit()
  },
  methods: {
    tnes(){
      this.ddda = false
    },
    //点击显示公告
    onnav() {
      this.ddda = true
    },
    //确定更改
    entd() {
      if (this.input != '') {
        uPnavicons({
          id: 1,
          Notice: this.input,
        }).then(() => {
          ;(this.input = ''), (this.ddda = false)
          this.norgit()
        })
      }
    },
    norgit() {
      getNotice().then((res) => {
        this.lists = res.data
        this.a = this.lists[0].Notice
        // console.log(res.data)
      })
    },
    //跳转路由
    returns() {
      this.$router.push({
        name: 'index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 10px;
}
//头部
.tops {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 40px;
  text-indent: 20px;
  .xiangyou {
    font-size: 20px;
    cursor: pointer;
  }
}

//公告
.notice {
  width: 100%;
  height: 100px;
  padding: 40px;
  box-sizing: border-box;
}
.index——bott {
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  position: relative;
  left: 200px;
}
.cont {
  display: flex;
  text-align: center;
  line-height: 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: space-around;
  justify-content: center;
  margin-top: 130px;
  .queding {
    width: 40px;
    height: 20px;
    border: 1px solid #ddd;
  }
  .quxiao {
    width: 40px;
    height: 20px;
    border: 1px solid #ddd;
  }
}

.demo-ruleForm >>>.el-input__inner{
    border: 0;
  }
</style>
